.aside
  overflow: hidden
  width: 25%
  float: right

.close
  display: none
  position: absolute
  right: 1.5em
  top: 1em
  width: 24px
  height: 24px
  opacity: 0.3
  &:hover 
    opacity: 1
  &:before, &:after 
    position: absolute
    left: 10px
    content: ' '
    height: 24px
    width: 2px
    background-color: #333
  &:before 
    transform: rotate(45deg)
  &:after
    transform: rotate(-45deg)

.aside-section 
  margin: 0 0 3em
  h1
    font: 1.25em/1.2 Lora
    margin: .67em 0
    color: #777
    &:before
      content: ''
      display: inline-block
      position: relative
      top: -2px
      margin-right: 0.45em
      float: left
      background: url('https://cdn.jsdelivr.net/gh/frontendsophie/hexo-theme-autumn@1.0.0/source/img/button.svg') no-repeat 0 0 / 84px 22px
      width: 22px
      height: 32px
  
  ul
    list-style: none
    margin: 0
    padding: 0
    li
      border-top: 1px dashed #ddd
      margin-top: .6em
      padding-top: .6em
      a
        color: #f78769
        text-decoration: none
        font: 14px Lato
        transition: .3s
        &:hover
          color: #ddd
            
.aside-section.tag
  li
    display: inline-block
    border: none
    margin: 0 10px 0 0
    a
      border: 1px dashed #ddd
      padding: 4px

@media screen and (max-width: 1015px) 
  .aside
    display: none
    overflow-y: auto
    position: fixed
    top: 0
    left: 0
    z-index: 2
    width: 28%
    height: 100vh
    padding: 3em 20px 0
    background-color: #fff
    box-shadow: 1px 1px 3px #ddd
    .close
      display: block


@media screen and (max-width: 640px) 
  .aside
    width: calc(100% - 40px)
    box-shadow: none
    .close
      width: 32px
      height: 32px
      &:before, &:after 
        left: 15px
        height: 33px

